// 当前主色调
$current-color: var(--current-color);


// 亮色 主题配置
.el-menu-item.is-active,
.topmenu-container.el-menu--horizontal>.el-menu-item.is-active,
.topmenu-container.el-menu--horizontal>.el-menu-item:hover {
  color: #fff!important;
  // background-color: $current-color !important;
  background: linear-gradient(90deg, $current-color, $current-color) !important;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, 
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: #fff!important;
  background-color: #626262 !important;
}
.navbar .right-menu .avatar-container .avatar-wrapper .user-avatar,
.user-info-head > img {
    border: 1px solid $outsideBorder-color;
}

.el-date-table td.available {
  border: 1px dashed transparent;

  &:hover {
    color: $current-color;
    border-color: $current-color;
    border-radius: 8px;
  }
}
.fixed-header {
  background: #fff;
}

div.pay-channel-container > div.box {
  margin: 0.5rem 1rem;
  padding: 1rem;
  border-radius: 8px;
}

.pagination-container,
.el-dialog,
.el-tree,
.el-table,
.el-card,
.card-panel,
.chart-wrapper {
  border: $outsideBorder !important;
  border-radius: 10px!important;
}

// 暗色 主题配置
.dark {
  color: var(--vt-c-text-dark-1);
  background: var(--vt-c-bg);


  .el-menu-item.is-active,
  .topmenu-container.el-menu--horizontal>.el-menu-item.is-active,
  .topmenu-container.el-menu--horizontal>.el-menu-item:hover {
    background: linear-gradient(90deg, #626262, #626262) !important;
  }
  .leftLogo{
    background-color: #141414;
  }

  .layout-border__right{
    background-color: #141414;
  }

  #v-menu{
    background-color: #141414;
    .el-sub-menu__title{
      color: #bfcbd9;
    }
    .el-menu-item{
      color: #bfcbd9;
    }
  }

  .fixed-header {
    background: var(--vt-c-bg);
  }

  .panel-group .card-panel:after {
    color: rgb(238 238 238 / 2%) !important;
  }
  .el-table {
    color: var(--vt-c-text-dark-1);
  }
  .el-date-table td.next-month, .el-date-table td.prev-month {
    color: #666667;
  }
  .el-picker-panel {
    border-color: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
  }
  .el-message-box,
  .el-date-table th,
  .el-dropdown-menu,
  .el-select-dropdown,
  .el-popover,
  .top-right-btn .el-button,
  .el-date-range-picker__content.is-left {
    border-color: $outsideBorder-color;
  }
  .el-input__inner {
    border-color: var(--vt-c-contentBg);
    background-color: transparent;

    &:hover {
      border-color: #626262;
    }
  }
  .el-tooltip__popper {
    border: 1px solid #1a1a1a;
  }
  .popper__arrow,
  .el-dropdown-menu__item--divided  {
    border-bottom-color: #1a1a1a !important;
  }
  .popper__arrow::after {
    border-bottom-color: #2f2f2f !important;
  }
  .el-dropdown-menu__item--divided:before {
    height: 1px;
    background-color: #1a1a1a;
  }
  .el-breadcrumb__separator {
    color: #1a1a1a;
  }
  .list-group-item {
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
  }
  .el-card__header {
    border-bottom: 1px solid #1a1a1a;
  }
  .el-tabs__item {
    color: #626262;
  }
  .el-tabs__item.is-active {
    color: #ababab;
  }
  .el-tabs__nav-wrap::after {
    background-color: #272727;
  }
  .card-panel-text,
  .el-descriptions,
  .el-card,
  .el-notification__title,
  .el-input__inner,
  .el-message-box__content {
    color: #C0C4CC !important;
  }
  .el-dialog {
    .vue-treeselect__control,
    .el-input__inner,
    .el-textarea__inner {
      color: #C0C4CC !important;
      border-color: #626262 !important;
      background-color: transparent !important;
    }

    input[disabled=disabled] {
      color: #626262 !important;
    }
  }
  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    color: #ffffff;
    background-color: #626262;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: #474747;
    background-color: #cdcdcd;
  }
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #fff;
    background-color: #838383;
  }
  .navbar .right-menu .avatar-container .avatar-wrapper .user-avatar {
    border: 1px solid #626262 !important;
  }
  .el-select:hover .el-input__inner,
  .el-notification,
  .el-date-table td {
    border: 1px dashed transparent;
  }
  .el-dropdown-menu__item--divided {
    border-top-color: #1a1a1a;
  }
  .el-dropdown-menu__item,
  .el-tree-node.is-current {
    color: #C0C4CC;
  }
  .el-submenu .el-menu-item + .el-menu {
    background-color: #252525 !important;
  }
  .nest-menu .el-submenu > .el-submenu__title:hover,
  .el-submenu .el-menu-item:hover {
    background-color: #1a1a1a !important;
  }

  .el-date-table td.in-range div, 
  .el-date-table td.in-range div:hover, 
  .el-date-table.is-week-mode .el-date-table__row.current div, 
  .el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: #3d3d3d;
  }

  .el-breadcrumb__inner a,
  .el-breadcrumb__inner.is-link {
    color: #626262 ;
  }

  .drawer-container .drawer-title {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .drawer-container .drawer-item {
    color: rgba(255, 255, 255, 0.65) !important;
  }
  
  .el-descriptions-item__content,
  .el-table th,
  .el-tree {
    color: #bbb !important;
  }

  .el-table .el-button--text {
    color: #31ad3b;

    &:hover {
      color: #44d950;
    }
  }
  button.el-button--default,
  button.el-button--primary,
  button.el-button--info {
    color: #ffffff !important;
    background: #626262 !important;
    border-color: #626262 !important;
  }
  button.el-button--warning {
    color: #FFF;
    background-color: #514739;
    border-color: #514739;
  }

  .el-tag {
    color: #a9a9a9;
    border-color: #5b5b5b !important;
  }
  .pay-channel-container .box,
  .el-descriptions .is-bordered .el-descriptions-item__cell {
    border-color: #5b5b5b !important;
  }

  .login-form {

    .el-input__inner {
      border-color: #626262;
    }
    .el-input-group__append, .el-input-group__prepend {
      color: #c0c4cc;
      background-color: #626262;
      border-color: #626262;
    }

  }
  .form-cont {
    .el-tabs__item {
      color: #626262 !important;
  
      &.is-active {
        color: inherit !important;
      }
    }
  }

  .content,
  .navbar,
  .contextmenu,
  .el-select-dropdown,
  .tags-view-item,
  .el-popover,
  .tags-view-container,
  .top-right-btn .el-button,
  .sidebar-menu,
  .pagination-container,
  .rightPanel,
  .card-panel,
  .chart-wrapper,
  .el-dialog,
  .el-picker-panel,
  .el-picker-panel__content {
    color: #fff !important;
    background-color: var(--vt-c-contentBg) !important;
  }

  

  [class^=vue-treeselect] {
    font-weight: inherit;
    color: #C0C4CC !important;
    background-color: var(--vt-c-contentBg) !important;
    border-color: #626262 !important;
  }

 
  [class^=el-]:not(
    .el-breadcrumb,
    .el-badge,
    .el-form-item__content,
    .el-scrollbar,
    tr.el-date-table__row,
    .el-message-box__wrapper,
    [class^=el-tooltip], 
    [class^=el-picker], 
    [class^=el-popover], 
    [class^=el-select], 
    [class^=el-tabs], 
    [class^=el-row], 
    [class^=el-col], 
    [class^=el-button], 
    [class^=el-form],
    .ThemeSwitch [class^=el-switch],
    [class^=el-input],
    [class^=el-dialog],
    [class^=el-icon]
  ) {
    background-color: var(--vt-c-contentBg) !important;
  }

  .tags-view-item {
    color: #999 !important;
    border-color: #626262 !important;
    
    &.active {
      color: #fff !important;
      background-color: #626262 !important;
    }
  }

  .el-menu {
    background: transparent;
  }
  .el-select-dropdown__item {
    color: #fff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #626262;
  }
  .el-switch__core {
    border-color: #5a5e66 !important;
  }
  .header-search .header-search-select .el-input__inner {
      background: #1a1a1a !important;
  }
}

.ThemeSwitch .el-switch__core {
  height: 22px;
  border-radius: 50px;
  border-color: #5a5e66 !important;

  &:after {
    top: 2px;
    left: 2px;
    content: '☼';
    line-height: 15px;
    font-size: .75rem;
    text-align: center;
    color: #ebeef5;
    background-color: #5a5e66;
  }
}

.ThemeSwitch.is-checked .el-switch__core::after {
  margin-left: -19px;
  content: '☽';
  transform: rotate(45deg);
}

.navbar,
.sidebar-logo-container,
.tags-view-container {
  border-bottom: $outsideBorder !important;
}

.container {
  margin: auto;
  background-color: transparent !important;
  // background-color: var(--vt-c-contentBg) !important;
}

.el-row,
.el-col,
.el-form,
.el-table tr {
  background-color: inherit !important;
}
#app .sidebar-container {
  border-right: $outsideBorder;
}
.el-table::before {
  display: none;
}
.el-tree {
  padding: 15px;

  .el-tree-node__content {
    height: 40px;
    border-bottom: 1px solid $outsideBorder-color;
  }
}
.el-table th,
.el-table td {
  border-bottom: 1px solid $outsideBorder-color!important;
}
.el-range-editor.el-input__inner {
  height: 32px;
  line-height: 32px;
  vertical-align: top;
}

.list-group-striped > .list-group-item > .svg-icon {
  margin-right: .5rem;
}